const path = require('path');
const ext = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        idx: './src/idx.js'
    },
    output: {
	filename: '[name].[chunkHash].js',
	path: path.resolve(__dirname, './dist/'),
        publicPath: './dist/',
        chunkFilename: '[name].chunk.js'
    },
    module: {
        rules:[
	    {

		// 注意这些预处理loader 一定放在style css loader之后从后往前处理。
		/*test: /\.scss$/,
		use:[
		    {
		        loader: 'style-loader'
		    },
		    {
			loader: 'css-loader'
		    },
		    {
		    loader: 'sass-loader'
		}]*/

 		// 提取css
 		test: /\.scss$/,
 		use: ext.extract({
		    // 不提取的时候用什么处理
		    fallback: {
			loader: 'style-loader'
		    },

		    // 下面这个use就是要提取的loader
		    use:[{
			loader:'css-loader'
		    },{
			loader:'sass-loader'
		    }]
		})
	    },
            // less 和 scss类似配置
	]
    },
    plugins: [
	new ext({
	    filename: '[name].m.css',
            // 给这个插件指定一个范围,提取css的一个范围 true:所有import 进来的css都会提取，提取到这个文件来， false: 默认提取初始化的，异步加载的不会提取就扔给fallback的style-loader来处理了，可以理解跟着异步模块加载进来的，不会抽出来。异步的和异步模块打包在一起了. 哪些一开就打包到页面中，哪些跟随自己的chunk打包.如果配合commonchunkplugin一起搞，也可以提出公用的css. css 就被写在了js中。把我们的初始化加载和我们的动态加载区分开,相当于把css模块放到js里面进行拆分的。
            allChunks: false
	})

    ]
}
